<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Editor</title>
	<style type="text/css" media="screen">
		body {
				overflow: hidden;
		}
		#editor {
				margin: 0;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
		}
	</style>
</head>
<body>
<pre id="editor">function foo(items) {
	var i;
	for (i = 0; i &lt; items.length; i++) {
			alert("Ace Rocks " + items[i]);
	}
}
</pre>
</body>
<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="src-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script>
	// ace编辑器配置
	var editConfig = {
		theme: 'monokai',
		mode: 'javascript',
		fontSize: '22px',
		readOnly: true,
	};
	window.onload = function (){
		// 引入
		var editor = ace.edit("editor");
		// 引入语言包
		ace.require("ace/ext/language_tools");
		// 设置主题(monokai是sublime主题)
		editor.setTheme("ace/theme/"+editConfig.theme);
		// 设置程序语言模式
		editor.session.setMode("ace/mode/"+editConfig.mode);
		// 设置字体大小
		document.getElementById('editor').style.fontSize = editConfig.fontSize;
		// 设置编辑器只读
		editor.setReadOnly(editConfig.readOnly);
		// 编辑器添加命令绑定事件
		editor.commands.addCommand({
			name: 'saveCommand',
			bindKey: {win: 'Ctrl-S',  mac: 'Command-S'},
			exec: function(editor) {
				//...
				alert('save');
			},
			readOnly: true // 如果不需要使用只读模式，这里设置false
		});
		// 绑定菜单按钮
		editor.commands.addCommand({
			name: 'showSettingsMenu',
			bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
			exec: function(editor) {
				editor.showSettingsMenu();
			},
			readOnly: true
		});

	}

</script>
</html>
